<template>
  <div class="box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <div class="condition">
      <div>分站</div>
      <div>
        <el-select v-model="Sub" placeholder="请选择">
          <el-option v-for="item in FenZhanlist" :key="item.ID" style="text-align: center;" :label="item.SubStationNum"
            :value="item.SubStationNum">
          </el-option>
        </el-select>
      </div>
      <div><el-button @click="Query" type="warning">查询</el-button></div>
    </div>
    <div class="Tbale">
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :header-cell-style="{
    background: 'rgb(40,103,185)',
    color: 'white',
    borderColor: 'rgb(43,88,144)',

    'text-align': 'center',

  }" :cell-style="{ 'text-align': 'center' }" height="700" style="width: 100%; padding: 0; height: 700px">
        <el-table-column prop="SRTDT_SYSNumber" label="传感器系统编号" width="290">
        </el-table-column>
        <el-table-column prop="SRTDT_InstallLoction" label="测点位置" width="330">
        </el-table-column>
        <el-table-column prop="SRTDT_SensorStyle" label=" 测点类型">
        </el-table-column>
        <el-table-column prop="SRTDT_MonitorValue" label="测点数值" width="200">
        </el-table-column>
        <el-table-column prop="SRTDT_Unit" label="测点单位"> </el-table-column>
        <el-table-column prop="SIIT_AlarmStatus" label="测点状态"> </el-table-column>
        <el-table-column prop="SRTDT_MinData" label="最小值" width="200"> </el-table-column>
        <el-table-column prop="SRTDT_AverData" label=" 平均值" width="200">
        </el-table-column>
        <el-table-column prop="SRTDT_MaxData" label="最大值" width="180"> </el-table-column>
        <el-table-column prop="SRTDT_AlarmCont" label=" 报警次数">
        </el-table-column>
        <el-table-column prop="SRTDT_CelectWav1" label="波长1" width="200">
        </el-table-column>
        <el-table-column prop="SRTDT_CelectWav2" label="波长2" width="200">
        </el-table-column>
        <el-table-column prop="SRTDT_CelectWav3" label="波长3" width="200">
        </el-table-column>
        <el-table-column prop="SRTDT_CelectWav4" label="波长4" width="200">
        </el-table-column>
        <el-table-column prop="SRTDT_BasePoint" label="基点"> </el-table-column>
        <el-table-column prop="SIIT_MiningGrouping" label="分组">
        </el-table-column>
        <el-table-column prop="SIIT_MiningFace" label="工作面" width="150">
        </el-table-column>
        <el-table-column prop="SRTDT_RefreshTime" label="刷新时间" width="200">
        </el-table-column>
      </el-table>
      <div class="block" style="width: 100%; text-align: center; margin-top: 10px">
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
          :current-page="currentPage4" :page-sizes="[pageSize]" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  dingbanshishixinxi,
  dingbanshebeipeizhi,
  dingbanshishixinxicha,
} from "../../https/api/user";
export default {
  data() {
    return {
      pageSize: 13,
      currentPage: 1,
      currentPage4: 1,
      Sub: "",
      FenZhanlist: [],
      tableData: [],
      time: "",
    };
  },
  mounted() {
    this.OnList();
    this.FenZhanBiao();
    this.time = setInterval(() => {
      this.OnList();
    }, 2000);
  },
  methods: {

    FenZhanBiao() {
      dingbanshebeipeizhi().then((res) => {
        console.log("分站编号", res);
        if (res) {
          this.FenZhanlist = res;
        }
      });
    },
    Query() {
      const data = {
        SubStationNum: this.Sub,
      };
      dingbanshishixinxicha(data).then((res) => {
        console.log("根据分站编号查询数据", res);
        if (res) {
          this.tableData = res;
        }
      });
    },
    handleMouseEnter() {
      clearInterval(this.time);
    },
    handleMouseLeave() {
      this.time = setInterval(() => {
        this.OnList();
      }, 1000);
    },
    OnList() {
      const data = {
        z: 1,
      };
      dingbanshishixinxi(data).then((res) => {
        console.log("顶板实时信息", res);
        if (res) {
          this.tableData = res;
        }
      });
    },



    handleSizeChange1(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    handleSizeChange(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  padding: 0 20px;

  .condition {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;

    >div:nth-child(1) {
      color: white;
    }

    >div:nth-child(2) {
      margin-left: 7px;

      .el-select {
        /deep/.el-input__inner {
          background-color: rgb(14, 26, 55);
          color: #fff;
          border: 1px solid rgb(40, 103, 185);
        }
      }

      .el-select-dropdown__item {
        font-size: 7px;
        line-height: 19px;
        color: #fff;
        font-weight: 200;
        background-color: #003e00;
      }
    }

    >div:nth-child(3) {
      margin-left: 7px;
    }

    >div:nth-child(4) {
      margin-left: 7px;
    }
  }

}

.Table {
  width: 100%;
  height: 750px;
}

::v-deep .el-table,
.el-table__expanded-cell {
  // padding: 20px !important;
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

::v-deep .el-table th>.cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}

.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}

/deep/.el-table td.el-table__cell {
  border-bottom: none !important;
}

/* 取消el-table鼠标移入高亮 */
div /deep/ .el-table tbody tr:hover>td {
  background: #ccc !important;
}

div /deep/ .el-table tbody tr {
  pointer-events: none;
}

::v-deep .el-form-item__label {
  color: white !important;
}

.picker {
  height: 40px;
  background-color: rgb(14, 26, 55);

  ::v-deep .el-range-input {
    background-color: rgb(14, 26, 55);
  }
}

::v-deep .el-input__inner {
  background-color: transparent !important;
  border-color: rgb(46, 95, 152);
}

::v-deep .el-table__fixed {
  // 左固定列
  height: auto !important;
  bottom: 12px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些,这个根据实际情况改
}

::v-deep .el-table__fixed-right {
  // 右固定列
  height: auto !important;
  bottom: 12px;
}

/deep/ .el-table__body-wrapper {
  height: 750px;
  /* 滚动条整体高 必须项 */
  border-right: none;
  overflow-y: scroll;
  /* overflow-y为了不出现水平滚动条*/
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  /* 滚动条的宽高 必须项 */
  height: 10px;
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #409eff;
  /*滚动条的背景颜色*/
}
</style>